<template>
<div id="admin">
  <app-table :total="total" @fetchData="fetchData">
    <el-col :span="4">
      <el-input placeholder="管理员/昵称/电话/邮箱" v-model.trim="filter.text"></el-input>
    </el-col>
    <el-col :span="2">
      <el-select v-model="filter.status" placeholder="状态">
        <el-option label="有效" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>
    </el-col>
    <el-date-picker v-model="createdTime" type="daterange" align="right" placeholder="创建时间" :picker-options="datePickerOptions">
    </el-date-picker>
    <el-date-picker v-model="updatedTime" type="daterange" align="right" placeholder="更新时间" :picker-options="datePickerOptions">
    </el-date-picker>
    <div slot="table">
      <el-button size="small" type="info" @click="handleCreate" style="float: right;margin-right:10px">新增</el-button>
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="id" label="序号" width="100" sortable>
        </el-table-column>
        <el-table-column prop="username" label="管理员账号" width="130">
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="100">
        </el-table-column>
        <el-table-column prop="phone" label="电话">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" sortable>
          <template scope="scope">
             {{datetime_format(scope.row.created_at)}}
          </template>
        </el-table-column>
         <el-table-column label="标签" width="80">
          <template scope="scope">
          <el-tag :type="scope.row.status === '1' ? 'success' : 'default'"
            close-transition>{{scope.row.status === '1' ? '有效' : '无效' }}
          </el-tag>
          </template>
      </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
  编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
      </el-table-column>
      </el-table>
      <admin-info v-model="adminvisible" :info="info" @submit="submit"></admin-info>
    </div>
  </app-table>
</div>
</template>

<script>
import AppTable from '../../common/app-table.vue'
import AdminInfo from './admin-info.vue'
import * as Admin from '../../../api/admin.js'
import Config from '../../../config.js'
import {
  get_filter_params,
  reset_filter_params,
  datetime_format,
  copy
} from '../../../helpers.js'

export default {
  data: function() {
    return {
      adminvisible: false,
      total: 10,
      tableData: [],
      info: null,
      filter: {
        text: '',
        status: undefined,
      },
      createdTime: undefined,
      updatedTime: undefined,
      datePickerOptions: Config.datePickerOptions
    }
  },
  methods: {
    submit(info){
      if(this.info){
        copy(info,this.info);
      }
      else{
        let temp = copy(info);
        temp.id = 1;
        this.tableData.unshift(temp);
      }
    },
    datetime_format: function(datetime) {
      return datetime_format(datetime, "yyyy-mm-dd hh:ii:ss")
    },
    fetchData: function(page = Config.page, bFilterReset = false) {
      if (bFilterReset)
        reset_filter_params(this.filter);
      let params = {
        page: page,
        filter: get_filter_params(this.filter)
      };
      Admin.getTableData(params).then((data) => {
        this.total = data.total;
        this.tableData = data;
      });
    },
    // 新增
    handleCreate: function() {
      this.adminvisible = true;
      this.info = null;
    },
    // 编辑
    handleEdit: function(index, row) {
      this.adminvisible =true;
      this.info = row;
    },
    // 删除
    handleDelete: function(index, row) {
      this.$confirm('此操作正在删除管理员：[' + row.nickname + '], 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Admin.del(row.id).then((data) => {
          this.tableData.splice(index, 1);
          this.$message({
            type: 'success',
            message: '操作成功'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作取消'
        });
      });
    }
  },
  created: function() {
    this.fetchData();
  },
  components: {
    AppTable,
    AdminInfo
  }
}
</script>
<style lang="less">
	#admin{
		margin-top: 20px;
		th{
			text-align: center;
		}
		td{
			text-align: center;
		}
		td img{
			width: 50px;
			height: 50px;
		}
	}
</style>
